<template>
  <view
    :class="['isCollect', { large: size === 'large' }, { active: isFollow }]"
  >
    <up-icon
      name="heart"
      :color="isFollow ? '#36A1EE' : '#fff'"
      size="20rpx"
    ></up-icon>
    {{ showText }}
  </view>
</template>

<script setup>
import { toRef, computed } from "vue";

const props = defineProps({
  defaultText: {
    type: String,
    default: "关注",
  },
  followText: {
    type: String,
    default: "已关注",
  },
  isFollow: {
    type: Boolean,
    default: true,
  },
  size: {
    type: String,
    default: "normal", // large
  },
});

const isFollow = toRef(props, "isFollow");
const defaultText = toRef(props, "defaultText");
const followText = toRef(props, "followText");
const showText = computed(() => {
  return isFollow.value ? followText.value : defaultText.value;
});
</script>

<style lang="scss">
.isCollect {
  background: linear-gradient(90deg, #59c3f8 0%, #36a1ee 100%);
  border-radius: 15rpx;
  height: 30rpx;
  display: flex;
  align-items: center;
  padding: 0 12rpx;
  color: #fff;
  font-size: 16rpx;
  width: 120rpx;
  justify-content: center;
  &.active {
    color: #36a1ee;
    background: linear-gradient(
      90deg,
      rgba(54, 161, 238, 0.2) 0%,
      rgba(54, 161, 238, 0.2) 100%
    );
  }
}
.isCollect.large {
  border-radius: 20rpx;
  height: 40rpx;
  padding: 0 20rpx;
  font-size: 20rpx;
}
</style>
